<template>
	<view class="bottom-tabbar" >
		<view class=" display-flex alig space-between safe-area-inset-bottom">
			<block v-for="(item,index) in tabbarList" :key="index">
				<template v-if="!item.midButton">
					<view class="m-tabbar-item position-relative" :style="current == index?`color:${diyBottomStyle.selectedColor};`:`color:${diyBottomStyle.unselectedColor};`" :class="{'active-tabbar':current == index}"
						@tap="handleTbabarChange(index)">
						<image class="margin-auto" style="width: 50rpx;height: 50rpx;"
							:src="current == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></image>
						<view class="font-size-22">{{item.text}}</view>
						<view v-if="item.customIcon" class="position-absolute" style="top: -20rpx;right: 20rpx;">
							<up-badge max="99" :value="unreadCount"></up-badge>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="m-tabbar-item mid-button display-flex flex-direction-column center alig"
						:style="current == index?`color:${diyBottomStyle.selectedColor};`:`color:${diyBottomStyle.unselectedColor};`" @tap="handleTbabarChange(index)">
						<u-image width="132rpx" height="132rpx"
							:src="current == index ? item.selectedIconPath : item.iconPath" mode="aspectFit"></u-image>
						<!-- <view class="font-size-22">{{item.text}}</view> -->
					</view>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import * as api from '@/request/app.js'; // 引入api 方法
	// import {
	// 	tabbarList
	// } from './tabbar.js'
	export default {
		name: "m-tabbar",
		props: {
			current: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				tabbarList: [],
				unreadCount: 0,
				diyBottomStyle:{}
			};
		},
		created() {
			uni.hideTabBar();
			this.getTabbar()
		},
		mounted() {},
		methods: {
			async getTabbar() {
				const {
					code,
					data
				} = await api.getTabbar()
				if (code == 0) {
					this.diyBottomStyle = data.diyBottomStyle
					this.tabbarList = data.diyBottomNav.map(item => {
						item.iconPath = item.unselected_icon
						item.selectedIconPath = item.selected_icon
						item.pagePath = item.pagePath
						item.text = item.name
						item.customIcon = false
						return item
					})
				}
			},
			// 点击切换tabbar
			handleTbabarChange(e) {
				// console.log('111111111',this.current);
				console.log('222222222', e);
				if (this.current == e) return;
				uni.switchTab({
					url: this.tabbarList[e].pagePath
				})
				// this.$emit('onTabbarIndex',e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-tabbar {
		width: 100%;
		padding: 10rpx 0rpx 10rpx;
		box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.04);
		text-align: center;
		position: fixed;
		bottom: 0;
		background: #fff;
		// color: #AEB1B9;
		padding-top: 10rpx;
		z-index: 10070;

		.u-image {
			margin: 0 auto;
		}

		.m-tabbar-item {
			width: calc(100% / 2);

		}

		.mid-button {
			margin-top: -55rpx;
		}

		.active-tabbar {
			// color: #FD1B76;
		}

		.u-tabbar__content__item__button {
			top: 6rpx !important;
		}

		.u-tabbar__content {
			box-shadow: 0rpx -3rpx 6rpx 1rpx rgba(0, 0, 0, 0.04);
		}

		.u-tabbar__content__circle__border::after,
		.u-tabbar__content::after {
			border: none !important;
		}
	}
</style>